<script setup lang="ts">
import { ref, computed } from 'vue'
import { userStore } from '@/store/user'
import Button from '@/components/common/Button.vue'
import { ElScrollbar } from 'element-plus'
import { kanbanStore } from '@/store/user'
import 'element-plus/es/components/scrollbar/style/css';
import Input from '@/components/common/Input.vue'
import { ElSelect, ElColorPicker, ElColorPickerPanel, ElDropdown } from 'element-plus'
import 'element-plus/es/components/select/style/css';
import 'element-plus/es/components/dropdown/style/css';
import 'element-plus/es/components/color-picker-panel/style/css';
import 'element-plus/es/components/color-picker/style/css';

const props = defineProps<{
    defaultActiveMainIndicator?: string;
    defaultActiveSubIndicator?: string;
    defaultTab?: string;
    index: number;
    type: 'twoChars' | 'threeChars' | 'fourChars' | 'sixChars';
}>()

const tabList = ref([
    { title: '主图', code: 'main', left: '9px' },
    { title: '副图', code: 'vice', left: '61px' }
])
const activeTab = ref(props.defaultTab)
const options = [
    {
        value: 'high',
        label: '最高价',
    },
    {
        value: 'low',
        label: '最低价',
    },
    {
        value: 'open',
        label: '开盘价',
    },
    {
        value: 'close',
        label: '收盘价',
    },
]
const lineList = [
    { value: '1', label: '1' },
    { value: '2', label: '2' },
    { value: '3', label: '3' },
    { value: '4', label: '4' },
]

const barTypeList = ref([
    { value: 'fill', label: '实心' },
    { value: 'stroke', label: '空心' },
])


const mainIndicator = ref([
    { title: 'MA', subtitle: 'MA - 移动平均线', code: 'ma', checked: false },
    { title: 'EMA', subtitle: 'EMA - 指数移动平均线', code: 'ema', checked: false },
    { title: 'BOOL', subtitle: 'BOOL - 布林线', code: 'bool', checked: false },
    { title: 'SAR', subtitle: 'SAR - 抛物线转向指标', code: 'sar', checked: false },
])

const subIndicator = ref([
    { title: "VOL", subtitle: "Vol - 成交量", code: "vol", checked: false },
    { title: 'MACD', subtitle: '指数平滑异同平均线', code: 'macd', checked: false },
    { title: 'KDJ', subtitle: '随机指标', code: 'kdj', checked: false },
    { title: 'RSI', subtitle: '相对强弱指数', code: 'rsi', checked: false },
])

const maList = ref([
    { title: 'MA1', code: 'ma1', checked: false, value: '0', color: '#f0b90b', lineSize: '1', lineType: 'close' },
    { title: 'MA2', code: 'ma2', checked: false, value: '0', color: '#eb40b5', lineSize: '1', lineType: 'close' },
    { title: 'MA3', code: 'ma3', checked: false, value: '0', color: '#71269c', lineSize: '1', lineType: 'close' },
    { title: 'MA4', code: 'ma4', checked: false, value: '0', color: '#d63864', lineSize: '1', lineType: 'close' },
    { title: 'MA5', code: 'ma5', checked: false, value: '0', color: '#50ae55', lineSize: '1', lineType: 'close' },
    { title: 'MA6', code: 'ma6', checked: false, value: '0', color: '#f37f20', lineSize: '1', lineType: 'close' },
    { title: 'MA7', code: 'ma7', checked: false, value: '0', color: '#af6cc3', lineSize: '1', lineType: 'close' },
    { title: 'MA8', code: 'ma8', checked: false, value: '0', color: '#5fc3d7', lineSize: '1', lineType: 'close' },
    { title: 'MA9', code: 'ma9', checked: false, value: '0', color: '#3860f6', lineSize: '1', lineType: 'close' },
    { title: 'MA10', code: 'ma10', checked: false, value: '0', color: '#43db5d', lineSize: '1', lineType: 'close' },
])

const emaList = ref([
    { title: 'EMA1', code: 'ema1', checked: false, value: '0', color: '#f0b90b', lineSize: 1, lineType: 'close' },
    { title: 'EMA2', code: 'ema2', checked: false, value: '0', color: '#eb40b5', lineSize: 1, lineType: 'close' },
    { title: 'EMA3', code: 'ema3', checked: false, value: '0', color: '#71269c', lineSize: 1, lineType: 'close' },
    { title: 'EMA4', code: 'ema4', checked: false, value: '0', color: '#d63864', lineSize: 1, lineType: 'close' },
    { title: 'EMA5', code: 'ema5', checked: false, value: '0', color: '#50ae55', lineSize: 1, lineType: 'close' },
    { title: 'EMA6', code: 'ema6', checked: false, value: '0', color: '#f37f20', lineSize: 1, lineType: 'close' },
    { title: 'EMA7', code: 'ema7', checked: false, value: '0', color: '#af6cc3', lineSize: 1, lineType: 'close' },
    { title: 'EMA8', code: 'ema8', checked: false, value: '0', color: '#5fc3d7', lineSize: 1, lineType: 'close' },
    { title: 'EMA9', code: 'ema9', checked: false, value: '0', color: '#3860f6', lineSize: 1, lineType: 'close' },
    { title: 'EMA10', code: 'ema10', checked: false, value: '0', color: '#43db5d', lineSize: 1, lineType: 'close' },
])

const macdObj = ref({
    periodList: [
        { title: '快线周期', value: '12' },
        { title: '慢线周期', value: '26' },
        { title: '信号周期', value: '9' }
    ],
    list: [
        { title: 'DEA', code: 'dea', checked: true, color: '#eb40b5', lineSize: 1 },
        { title: 'DIF', code: 'dif', checked: true, color: '#71269c', lineSize: 1 },
        { title: 'MACD', code: 'macd', checked: true },
    ],
    type: {
        LongGrow: {
            type: 'stroke',
            color: '#2ebd85'
        },
        ShortGrow: {
            type: 'stroke',
            color: '#f6465d'
        },
        LongFall: {
            type: 'fill',
            color: '#2ebd85'
        },
        ShortFall: {
            type: 'fill',
            color: '#f6465d'
        }
    }
})

const volObj = ref({
    barType: {
        long: 'fill',
        short: 'fill'
    },
    list: [
        { title: 'MAVOL1', code: 'mavol1', checked: true, value: '5', color: '#5fc3d7', lineSize: 1 },
        { title: 'MAVOL2', code: 'mavol2', checked: true, value: '10', color: '#d63864', lineSize: 1 },
    ]
})

const predefineColors = ref([
    '#000000',
    '#202630',
    '#333b47',
    '#434650',
    '#5d606a',
    '#787b85',
    '#9598a0',
    '#b2b5bd',
    '#eaecef',
    '#ffffff',
    '#f6465d',
    '#f19d38',
    '#fcec60',
    '#2ebd85',
    '#449682',
    '#54b9d1',
    '#3860f6',
    '#613cb0',
    '#8f31aa',
    '#d63864',
    '#eda5a6',
    '#f7ce8a',
    '#fdf5a7',
    '#afd4ab',
    '#86cabd',
    '#96dbe8',
    '#99bdf4',
    '#af9dd6',
    '#c595d4',
    '#e694b0',
    '#e78283',
    '#f4ba60',
    '#fdf188',
    '#90c58a',
    '#67baa8',
    '#73cdde',
    '#6a9aef',
    '#9076c7',
    '#af6cc3',
    '#df6b91',
    // '',
    // '',
    // '',
    // '',
    // '',
    // '',
    // '',
    // '',
    // '',
    // '',
])
const activeMainIndicator = ref(props.defaultActiveMainIndicator || 'ma')
const activeSubIndicator = ref(props.defaultActiveSubIndicator || 'vol')
const emit = defineEmits(['close'])
const currentMainName = computed(() => {
    const item = mainIndicator.value.find(item => item.code === activeMainIndicator.value)
    return item?.subtitle
})

const currentSubName = computed(() => {
    const item = subIndicator.value.find(item => item.code === activeSubIndicator.value)
    return item?.subtitle
})
const myMainIndicator = (kanbanStore()[props.type as keyof ReturnType<typeof kanbanStore>] as any[])[props.index].mainIndicator
mainIndicator.value[0].checked = myMainIndicator.ma.checked
mainIndicator.value[1].checked = myMainIndicator.ema.checked
subIndicator.value[0].checked = myMainIndicator.vol.checked
subIndicator.value[1].checked = myMainIndicator.macd.checked
maList.value.forEach(item => {
    item.checked = myMainIndicator.ma.list.filter((item: any) => item.checked).map((item: { code: any }) => item.code).includes(item.code)
    item.value = myMainIndicator.ma.list.find((item1: { code: string }) => item1.code === item.code)?.value + ''
    item.color = myMainIndicator.ma.list.find((item1: { code: string }) => item1.code === item.code)?.color
    item.lineType = myMainIndicator.ma.list.find((item1: { code: string }) => item1.code === item.code)?.lineType
    item.lineSize = myMainIndicator.ma.list.find((item1: { code: string }) => item1.code === item.code)?.lineSize
})
emaList.value.forEach(item => {
    item.checked = myMainIndicator.ema.list.filter((item: any) => item.checked).map((item: { code: any }) => item.code).includes(item.code)
    item.value = myMainIndicator.ema.list.find((item1: { code: string }) => item1.code === item.code)?.value + ''
    item.color = myMainIndicator.ema.list.find((item1: { code: string }) => item1.code === item.code)?.color
    item.lineType = myMainIndicator.ema.list.find((item1: { code: string }) => item1.code === item.code)?.lineType
    item.lineSize = myMainIndicator.ema.list.find((item1: { code: string }) => item1.code === item.code)?.lineSize
})
volObj.value.barType.long = myMainIndicator.vol.barType.long
volObj.value.barType.short = myMainIndicator.vol.barType.short
volObj.value.list.forEach(item => {
    item.checked = myMainIndicator.vol.list.filter((item: any) => item.checked).map((item: { code: any }) => item.code).includes(item.code)
    item.value = myMainIndicator.vol.list.find((item1: { code: string }) => item1.code === item.code)?.value + ''
    item.color = myMainIndicator.vol.list.find((item1: { code: string }) => item1.code === item.code)?.color
    item.lineSize = myMainIndicator.vol.list.find((item1: { code: string }) => item1.code === item.code)?.lineSize
})

macdObj.value.periodList.forEach(item => {
    item.value = myMainIndicator.macd.periodList.find((item1: { title: string }) => item1.title === item.title)?.value + ''
})
macdObj.value.list.forEach(item => {
    item.checked = myMainIndicator.macd.list.filter((item: any) => item.checked).map((item: { code: any }) => item.code).includes(item.code)
    item.color = myMainIndicator.macd.list.find((item1: { code: string }) => item1.code === item.code)?.color
    item.lineSize = myMainIndicator.macd.list.find((item1: { code: string }) => item1.code === item.code)?.lineSize
})
macdObj.value.type = myMainIndicator.macd.type
const close = () => {
    emit('close')
}
const saveFn = () => {
    mainIndicator.value.forEach(item => {
        if (item.code === 'ma') {
            const obj = {
                checked: false,
                list: [] as { code: string; value: string }[]
            }
            obj.checked = item.checked
            obj.list = maList.value
            kanbanStore().setMainIndicator(props.type as keyof ReturnType<typeof kanbanStore>, props.index, 'ma', obj)
        }
        else if (item.code === 'ema') {
            const obj = {
                checked: false,
                list: [] as { code: string; value: string }[]
            }
            obj.checked = item.checked
            obj.list = emaList.value
            kanbanStore().setMainIndicator(props.type as keyof ReturnType<typeof kanbanStore>, props.index, 'ema', obj)
        }
    })
    subIndicator.value.forEach(item => {
        if (item.code === 'vol') {
            const obj = {
                checked: false,
                barType: {},
                list: [] as { code: string; value: string }[]
            }
            obj.checked = item.checked
            obj.barType = volObj.value.barType
            obj.list = volObj.value.list
            kanbanStore().setMainIndicator(props.type as keyof ReturnType<typeof kanbanStore>, props.index, 'vol', obj)
        } else if (item.code === 'macd') {
            const obj = {
                checked: false,
                list: [] as any,
                periodList: [] as any,
                type: {},
            }
            obj.checked = item.checked
            obj.list = macdObj.value.list
            obj.periodList = macdObj.value.periodList
            obj.type = macdObj.value.type
            kanbanStore().setMainIndicator(props.type as keyof ReturnType<typeof kanbanStore>, props.index, 'macd', obj)

        }
    })
    close()
}

</script>

<template>
    <div class="w-[672px] h-[500px] box-border dark:bg-[#202630]">
        <div
            class="h-[40px] flex items-center justify-between px-[24px] py-[18px] border-0 border-b border-solid border-[#ededed] dark:border-[#343b47]">
            <div class="flex items-center gap-[20px] text-[16px] relative">
                <div @click="activeTab = item.code" v-for="item, i in tabList" :key="i" class=" cursor-pointer"
                    :class="[item.code === activeTab ? 'text-black' : 'text-[#757575]']">{{
                        item.title }}
                </div>
                <span class=" absolute bottom-[-10px] w-[16px] h-[3px] bg-primary-300"
                    :style="{ left: tabList.find(item => item.code === activeTab)?.left }"></span>
            </div>
            <div @click="close" class="iconfont icon-guanbi cursor-pointer"></div>
        </div>
        <div class="flex h-[calc(100%-77px)]" v-show="activeTab === 'main'">
            <div
                class="w-[155px] border-0 border-r dark:border-[#343b47] border-solid border-[#ededed] py-[20px] box-border flex flex-col gap-[4px]">
                <div class="px-[20px] pb-[4px] text-[14px]">Main</div>
                <div @click="activeMainIndicator = item.code"
                    class="h-[40px] hover:bg-[#f5f5f5] dark:hover:bg-[#2a313d] cursor-pointer px-[20px] text-[14px] flex items-center justify-between"
                    :class="[item.code === activeMainIndicator ? 'bg-[#f5f5f5] dark:bg-[#2a313d]' : '']"
                    v-for="item, i in mainIndicator" :key="i">
                    <div class="flex items-center">
                        <div @click.stop="item.checked = !item.checked"
                            :class="[item.checked ? 'bg-black border-black dark:bg-[#EAECEF] dark:border-[#EAECEF]' : 'bg-white dark:bg-dark-bg']"
                            class="w-[15px] h-[15px] border-solid border-[1px] border-[#9C9C9C] rounded-[2px] flex items-center justify-center flex-shrink-0  mr-[8px]">
                            <span class="iconfont icon-xuanze text-[12px] "
                                :class="[item.checked ? 'block text-white dark:text-dark-bg' : 'hidden']"></span>
                        </div>
                        <div>{{ item.title }}</div>
                    </div>
                    <div class="iconfont icon-you text-[10px] text-[#000]"></div>
                </div>
            </div>
            <div class="w-[calc(100%-156px)]">
                <div class="h-[359px] box-border px-[24px] py-[16px]">
                    <div class="h-[30px] text-[14px]">{{ currentMainName }}</div>
                    <div class="h-[calc(100%-30px)] overflow-y-auto">
                        <div v-show="activeMainIndicator === 'ma'" class="flex flex-col">
                            <div v-for="item, i in maList" :key="i" class="h-[50px] flex items-center justify-between">
                                <div class="flex items-center w-[90px] shrink-0">
                                    <div @click.stop="item.checked = !item.checked"
                                        :class="[item.checked ? 'bg-black border-black dark:bg-[#EAECEF] dark:border-[#EAECEF]' : 'bg-white dark:bg-dark-bg']"
                                        class="w-[15px] cursor-pointer h-[15px] border-solid border-[1px] border-[#9C9C9C] rounded-[2px] flex items-center justify-center flex-shrink-0  mr-[8px]">
                                        <span class="iconfont icon-xuanze text-[12px] "
                                            :class="[item.checked ? 'block text-white dark:text-dark-bg' : 'hidden']"></span>
                                    </div>
                                    <div @click.stop="item.checked = !item.checked" class="text-[14px] cursor-pointer">
                                        {{
                                            item.title }}</div>
                                </div>
                                <Input v-model="item.value"
                                    class="w-[96px]  shrink-0 ml-[10px] !h-[32px] rounded-[4px] text-[14px] !bg-[#f5f5f5] border-[#f5f5f5] dark:!bg-[#2a313d]"
                                    placeholder="" />
                                <el-select v-model="item.lineType" placeholder="Select"
                                    style="width: 100px; flex-shrink: 0;">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                                <el-select v-model="item.lineSize" placeholder="Select"
                                    style="width: 100px;flex-shrink: 0;">
                                    <template #label>
                                        <div class="flex items-center justify-center h-full">
                                            <div class=" bg-[#000] w-full" :style="{ height: item.lineSize + 'px' }">
                                            </div>
                                        </div>
                                    </template>
                                    <el-option v-for="item in lineList" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <div class="flex items-center justify-center h-full">
                                            <div class="bg-[#000] w-full" :style="{ height: item.value + 'px' }">
                                            </div>
                                        </div>
                                    </el-option>
                                </el-select>
                                <ElColorPicker show-alpha :predefine="predefineColors" v-model="item.color"
                                    ok-text="确认" />
                            </div>
                        </div>
                        <div v-show="activeMainIndicator === 'ema'" class="flex flex-col">
                            <div v-for="item, i in emaList" :key="i" class="h-[50px] flex items-center justify-between">
                                <div class="flex items-center w-[90px] shrink-0">
                                    <div @click.stop="item.checked = !item.checked"
                                        :class="[item.checked ? 'bg-black border-black dark:bg-[#EAECEF] dark:border-[#EAECEF]' : 'bg-white dark:bg-dark-bg']"
                                        class="w-[15px] cursor-pointer h-[15px] border-solid border-[1px] border-[#9C9C9C] rounded-[2px] flex items-center justify-center flex-shrink-0  mr-[8px]">
                                        <span class="iconfont icon-xuanze text-[12px] "
                                            :class="[item.checked ? 'block text-white dark:text-dark-bg' : 'hidden']"></span>
                                    </div>
                                    <div @click.stop="item.checked = !item.checked" class="text-[14px] cursor-pointer">
                                        {{
                                            item.title }}</div>
                                </div>
                                <Input v-model="item.value"
                                    class="w-[96px] ml-[10px] shrink-0 !h-[32px] rounded-[4px] text-[14px] !bg-[#f5f5f5] border-[#f5f5f5]"
                                    placeholder="" />
                                <el-select v-model="item.lineType" placeholder="Select"
                                    style="width: 100px;flex-shrink: 0;">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                                <el-select v-model="item.lineSize" placeholder="Select"
                                    style="width: 100px;flex-shrink: 0;">
                                    <template #label>
                                        <div class="flex items-center justify-center h-full">
                                            <div class=" bg-[#000] w-full" :style="{ height: item.lineSize + 'px' }">
                                            </div>
                                        </div>
                                    </template>
                                    <el-option v-for="item in lineList" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <div class="flex items-center justify-center h-full">
                                            <div class="bg-[#000] w-full" :style="{ height: item.value + 'px' }">
                                            </div>
                                        </div>
                                    </el-option>
                                </el-select>
                                <ElColorPicker :predefine="predefineColors" v-model="item.color" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="h-[64px] flex justify-end px-[24px] gap-[10px]">
                    <Button class="w-[136px] h-[40px] leading-[40px] !bg-[#ededed]">恢复默认</Button>
                    <Button class="w-[136px] h-[40px] leading-[40px]" @click="saveFn">保存</Button>
                </div>
            </div>
        </div>
        <div class="flex h-[calc(100%-77px)]" v-show="activeTab === 'vice'">
            <div
                class="w-[155px] border-0 border-r border-solid border-[#ededed] py-[20px] box-border flex flex-col gap-[4px]">
                <div class="px-[20px] pb-[4px] text-[14px]">Sub</div>
                <div @click="activeSubIndicator = item.code"
                    class="h-[40px] hover:bg-[#f5f5f5] cursor-pointer px-[20px] text-[14px] flex items-center justify-between"
                    :class="[item.code === activeSubIndicator ? 'bg-[#f5f5f5]' : '']" v-for="item, i in subIndicator"
                    :key="i">
                    <div class="flex items-center">
                        <div @click.stop="item.checked = !item.checked"
                            :class="[item.checked ? 'bg-black border-black dark:bg-[#EAECEF] dark:border-[#EAECEF]' : 'bg-white dark:bg-dark-bg']"
                            class="w-[15px] h-[15px] border-solid border-[1px] border-[#9C9C9C] rounded-[2px] flex items-center justify-center flex-shrink-0  mr-[8px]">
                            <span class="iconfont icon-xuanze text-[12px] "
                                :class="[item.checked ? 'block text-white dark:text-dark-bg' : 'hidden']"></span>
                        </div>
                        <div>{{ item.title }}</div>
                    </div>
                    <div class="iconfont icon-you text-[10px] text-[#000]"></div>
                </div>
            </div>
            <div class="w-[calc(100%-156px)]">
                <div class="h-[359px] box-border px-[24px] py-[16px]">
                    <div class="h-[30px] text-[14px]">{{ currentSubName }}</div>
                    <ElScrollbar height="calc(100% - 30px)">
                        <div v-show="activeSubIndicator === 'vol'" class="flex flex-col text-black">
                            <div class="text-[#9c9c9c] text-[12px]">
                                MAVOL是指将某个周期的成交量相加并取平均值，在成交量直方图中形成更平滑的曲线，即成交量平均线。
                            </div>
                            <div class="h-[40px] mt-[10px] flex items-center gap-[10px]">
                                <div class="w-[42%] text-[14px]">Long</div>
                                <ElSelect v-model="volObj.barType.long" style="width: 96px;" class="w-[58%]">
                                    <el-option v-for="item in barTypeList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </ElSelect>
                            </div>
                            <div class="h-[40px] mt-[10px] flex items-center gap-[10px]">
                                <div class="w-[42%] text-[14px]">Short</div>
                                <ElSelect v-model="volObj.barType.short" style="width: 96px;" class="w-[58%]">
                                    <el-option v-for="item in barTypeList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </ElSelect>
                            </div>
                            <div class="h-[40px] mt-[10px] flex items-center gap-[10px]" v-for="item, i in volObj.list"
                                :key="i">
                                <div class="w-[42%] flex items-center shrink-0">
                                    <div @click.stop="item.checked = !item.checked"
                                        :class="[item.checked ? 'bg-black border-black dark:bg-[#EAECEF] dark:border-[#EAECEF]' : 'bg-white dark:bg-dark-bg']"
                                        class="w-[15px] h-[15px] cursor-pointer border-solid border-[1px] border-[#9C9C9C] rounded-[2px] flex items-center justify-center flex-shrink-0  mr-[8px]">
                                        <span class="iconfont icon-xuanze text-[12px] "
                                            :class="[item.checked ? 'block text-white dark:text-dark-bg' : 'hidden']"></span>
                                    </div>
                                    <div class="text-[14px]">MAVOL{{ i + 1 }}</div>
                                </div>
                                <div class="w-[calc(58%-10px)] flex items-center gap-[10px] shrink-0">
                                    <Input v-model="item.value"
                                        class="w-[96px] !text-[14px] !h-[32px] rounded-[4px] !bg-[#f5f5f5] border-[#f5f5f5]"
                                        placeholder="" />
                                    <el-select v-model="item.lineSize" placeholder="Select" style="width: 100px">
                                        <template #label>
                                            <div class="flex items-center justify-center h-full">
                                                <div class=" bg-[#000] w-full"
                                                    :style="{ height: item.lineSize + 'px' }">
                                                </div>
                                            </div>
                                        </template>
                                        <el-option v-for="item in lineList" :key="item.value" :label="item.label"
                                            :value="item.value">
                                            <div class="flex items-center justify-center h-full">
                                                <div class="bg-[#000] w-full" :style="{ height: item.value + 'px' }">
                                                </div>
                                            </div>
                                        </el-option>
                                    </el-select>
                                    <ElDropdown trigger="click" :show-arrow="false">
                                        <div
                                            class="w-[32px] cursor-pointer h-[32px] flex items-center justify-center border-solid border-[1px] border-[#dddddd] rounded-[4px]">
                                            <div class="w-[24px] h-[24px]" :style="{ background: item.color }">
                                            </div>
                                        </div>
                                        <template #dropdown>
                                            <div class="myColor myColor1">
                                                <ElColorPickerPanel style="width: 286px;" :predefine="predefineColors"
                                                    show-alpha v-model="item.color" />
                                                <!-- <div>123</div> -->
                                            </div>
                                        </template>
                                    </ElDropdown>
                                </div>
                            </div>
                        </div>
                        <div v-show="activeSubIndicator === 'macd'" class="flex flex-col text-black">
                            <div class="h-[40px] flex items-center gap-[10px]" :class="[i > 0 ? 'mt-[10px]' : '']"
                                v-for="item, i in macdObj.periodList" :key="i">
                                <div class="w-[42%] text-[14px]">{{ item.title }}</div>
                                <Input v-model="item.value"
                                    class="w-[96px] !text-[14px] !h-[32px] rounded-[4px] !bg-[#f5f5f5] border-[#f5f5f5]"
                                    placeholder="" />
                            </div>
                            <div class="h-[40px] mt-[10px] flex items-center gap-[10px]" v-for="item, i in macdObj.list"
                                :key="i">
                                <div class="w-[42%] flex items-center shrink-0">
                                    <div @click.stop="item.checked = !item.checked"
                                        :class="[item.checked ? 'bg-black border-black dark:bg-[#EAECEF] dark:border-[#EAECEF]' : 'bg-white dark:bg-dark-bg']"
                                        class="w-[15px] h-[15px] cursor-pointer border-solid border-[1px] border-[#9C9C9C] rounded-[2px] flex items-center justify-center flex-shrink-0  mr-[8px]">
                                        <span class="iconfont icon-xuanze text-[12px] "
                                            :class="[item.checked ? 'block text-white dark:text-dark-bg' : 'hidden']"></span>
                                    </div>
                                    <div class="text-[14px]">{{ item.title }}</div>
                                </div>
                                <div class="w-[calc(58%-10px)] flex items-center shrink-0 gap-[10px]"
                                    v-if="item.code !== 'macd'">
                                    <el-select v-model="item.lineSize" placeholder="Select" style="width: 100px">
                                        <template #label>
                                            <div class="flex items-center justify-center h-full">
                                                <div class=" bg-[#000] w-full"
                                                    :style="{ height: item.lineSize + 'px' }">
                                                </div>
                                            </div>
                                        </template>
                                        <el-option v-for="item in lineList" :key="item.value" :label="item.label"
                                            :value="item.value">
                                            <div class="flex items-center justify-center h-full">
                                                <div class="bg-[#000] w-full" :style="{ height: item.value + 'px' }">
                                                </div>
                                            </div>
                                        </el-option>
                                    </el-select>
                                    <ElDropdown trigger="click" :show-arrow="false">
                                        <div
                                            class="w-[32px] cursor-pointer h-[32px] flex items-center justify-center border-solid border-[1px] border-[#dddddd] rounded-[4px]">
                                            <div class="w-[24px] h-[24px] rounded-[4px]"
                                                :style="{ background: item.color }">
                                            </div>
                                        </div>
                                        <template #dropdown>
                                            <div class="myColor myColor1">
                                                <ElColorPickerPanel style="width: 286px;" :predefine="predefineColors"
                                                    show-alpha v-model="item.color" />
                                                <!-- <div>123</div> -->
                                            </div>
                                        </template>
                                    </ElDropdown>
                                </div>
                            </div>
                            <div class="h-[40px] flex items-center gap-[10px] mt-[10px]">
                                <div class="w-[42%] text-[14px]">Long (Grow)</div>
                                <div class="w-[calc(58%-10px)] flex items-center shrink-0 gap-[10px]">
                                    <ElSelect v-model="macdObj.type.LongGrow.type" style="width: 96px;" class="w-[58%]">
                                        <el-option v-for="item in barTypeList" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </ElSelect>
                                    <ElDropdown trigger="click" :show-arrow="false">
                                        <div
                                            class="w-[32px] cursor-pointer h-[32px] flex items-center justify-center border-solid border-[1px] border-[#dddddd] rounded-[4px]">
                                            <div class="w-[24px] h-[24px] rounded-[4px]"
                                                :style="{ background: macdObj.type.LongGrow.color }">
                                            </div>
                                        </div>
                                        <template #dropdown>
                                            <div class="myColor">
                                                <ElColorPickerPanel style="width: 76px;"
                                                    :predefine="['#2ebd85', '#f6465d']" show-alpha
                                                    v-model="macdObj.type.LongGrow.color" />
                                            </div>
                                        </template>
                                    </ElDropdown>
                                </div>
                            </div>
                            <div class="h-[40px] flex items-center gap-[10px] mt-[10px]">
                                <div class="w-[42%] text-[14px]">Long (Fall)</div>
                                <div class="w-[calc(58%-10px)] flex items-center shrink-0 gap-[10px]">
                                    <ElSelect v-model="macdObj.type.LongFall.type" style="width: 96px;" class="w-[58%]">
                                        <el-option v-for="item in barTypeList" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </ElSelect>
                                    <ElDropdown trigger="click" :show-arrow="false">
                                        <div
                                            class="w-[32px] cursor-pointer h-[32px] flex items-center justify-center border-solid border-[1px] border-[#dddddd] rounded-[4px]">
                                            <div class="w-[24px] h-[24px]  rounded-[4px]"
                                                :style="{ background: macdObj.type.LongFall.color }">
                                            </div>
                                        </div>
                                        <template #dropdown>
                                            <div class="myColor">
                                                <ElColorPickerPanel style="width: 76px;"
                                                    :predefine="['#2ebd85', '#f6465d']" show-alpha
                                                    v-model="macdObj.type.LongFall.color" />
                                            </div>
                                        </template>
                                    </ElDropdown>
                                </div>
                            </div>
                            <div class="h-[40px] flex items-center gap-[10px] mt-[10px]">
                                <div class="w-[42%] text-[14px]">Short (Grow)</div>
                                <div class="w-[calc(58%-10px)] flex items-center shrink-0 gap-[10px]">
                                    <ElSelect v-model="macdObj.type.ShortGrow.type" style="width: 96px;"
                                        class="w-[58%]">
                                        <el-option v-for="item in barTypeList" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </ElSelect>
                                    <ElDropdown trigger="click" :show-arrow="false">
                                        <div
                                            class="w-[32px] cursor-pointer h-[32px] flex items-center justify-center border-solid border-[1px] border-[#dddddd] rounded-[4px]">
                                            <div class="w-[24px] h-[24px]  rounded-[4px]"
                                                :style="{ background: macdObj.type.ShortGrow.color }">
                                            </div>
                                        </div>
                                        <template #dropdown>
                                            <div class="myColor">
                                                <ElColorPickerPanel style="width: 76px;"
                                                    :predefine="['#2ebd85', '#f6465d']" show-alpha
                                                    v-model="macdObj.type.ShortGrow.color" />
                                            </div>
                                        </template>
                                    </ElDropdown>
                                </div>
                            </div>
                            <div class="h-[40px] flex items-center gap-[10px] mt-[10px]">
                                <div class="w-[42%] text-[14px]">Short (Fall)</div>
                                <div class="w-[calc(58%-10px)] flex items-center shrink-0 gap-[10px]">
                                    <ElSelect v-model="macdObj.type.ShortFall.type" style="width: 96px;"
                                        class="w-[58%]">
                                        <el-option v-for="item in barTypeList" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </ElSelect>
                                    <ElDropdown trigger="click" :show-arrow="false">
                                        <div
                                            class="w-[32px] cursor-pointer h-[32px] flex items-center justify-center border-solid border-[1px] border-[#dddddd] rounded-[4px]">
                                            <div class="w-[24px] h-[24px]  rounded-[4px]"
                                                :style="{ background: macdObj.type.ShortFall.color }">
                                            </div>
                                        </div>
                                        <template #dropdown>
                                            <div class="myColor">
                                                <ElColorPickerPanel style="width: 76px;"
                                                    :predefine="['#2ebd85', '#f6465d']" show-alpha
                                                    v-model="macdObj.type.ShortFall.color" />
                                            </div>
                                        </template>
                                    </ElDropdown>
                                </div>
                            </div>

                        </div>
                    </ElScrollbar>
                </div>
                <div class="h-[64px] flex justify-end px-[24px] gap-[10px]">
                    <Button class="w-[136px] h-[40px] leading-[40px] !bg-[#ededed]">恢复默认</Button>
                    <Button class="w-[136px] h-[40px] leading-[40px]" @click="saveFn">保存</Button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
:deep(.is-alpha) {
    background: none;
}

.myColor :deep(.el-color-picker-panel__wrapper) {
    display: none;
}

.myColor :deep(.el-color-alpha-slider) {
    display: none;
}

.myColor :deep(.el-color-predefine__color-selector.selected) {
    border-color: #409eff !important;
    box-shadow: none;
}

.myColor :deep(.el-color-predefine__color-selector) {
    width: 24px;
    height: 24px;
    padding: 4px;
    border: 1px solid #ddd;
}

.myColor :deep(.el-color-picker-panel__footer) {
    display: none;
}

.myColor :deep(.el-color-predefine) {
    width: 76px;
}

.myColor1 :deep(.el-color-predefine) {
    width: 286px;
}

.myColor1 :deep(.el-color-picker-panel.is-border) {
    border: none
}

.myColor1 :deep(.el-color-predefine__color-selector.selected) {
    border-color: #ededed !important;
    box-shadow: none;
}

.myColor1 :deep(.el-color-predefine__color-selector) {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #ededed;
}

.myColor1 :deep(.el-color-alpha-slider) {
    display: block;
}

:deep(.el-color-alpha-slider) {
    background-image: none !important;
}
</style>
<style>
.el-color-alpha-slider {
    background-image: none !important;
}

.el-color-picker .el-color-picker__icon {
    display: none;
}
</style>